<template>
	<view class="p-30 fl-s-s">
		<view class="w-1 fr-b-c">
			<text class="c-00 fs-32 bold">反馈分类</text>
		</view>
		<view class="w-1 fr-b-s warp m-t-20">
			<view class="fr-c m-b-20 p-r-20" :class="curtab==index?'tab-act':'tab'" @click="changeTab(index)"
				v-for="(item,index) in tabs" :key="index">
				<text class="text-line-1">{{item.val}}</text>
			</view>
			<view style="width: 224rpx; opacity: 0;"></view>
		</view>
		<text class="c-33 fs-32 bold m-t-20">反馈问题</text>
		<view class="w-1 br-15 o-h fl-s-s q-box m-t-20">
			<textarea maxlength="500" v-model.trim="content" disable-default-padding placeholder="请输入反馈的问题"
				style="background: #f3f5f9;" class="w-1 flex-1 fs-26"></textarea>
			<text class="w-1 fr-e-c c-33 fs-26 m-t-20">{{content.length}}/500</text>
		</view>
		<text class="c-00 fs-32 bold m-t-40">问题图片</text>
		<view class="m-t-20 w-1">
			<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :multiple="true"
				width="166rpx" height="166rpx" :maxCount="3">
			</up-upload>
		</view>
		<text class="c-00 fs-32 bold m-t-40">联系姓名</text>
		<input type="text" v-model.trim="name" class="input-box fs-26 w-1 m-t-20" placeholder="请输入联系姓名" />
		<text class="c-00 fs-32 bold m-t-40">联系电话</text>
		<input type="number" maxlength="11" v-model.trim="tel" class="input-box fs-26 w-1 m-t-20" placeholder="请输入联系电话" />
		<view class="w-1 fr-c m-t-35">
			<view class="big-btn fr-c c-ff fs-32" @click="sub">提交</view>
		</view>
		<!-- <view class="w-1 fr-c m-t-30">
			<text class="c-price fs-32" @click="rightClick">反馈记录</text>
		</view> -->
	</view>
</template>

<script setup>
	import {
		baseUrl
	} from '@/utils/base.js';
	const fileList1 = ref([]);
	const tabs = [{
			val: '账户'
		},
		{
			val: '交易'
		},
		{
			val: '功能'
		},
		{
			val: '建议'
		},
		{
			val: '投诉'
		},
		{
			val: '其他'
		}
	]

	const curtab = ref(0)
	const content = ref('');
	const name = ref('');
	const tel = ref('');
	const img = ref([]);


	function changeTab(index) {
		curtab.value = index;
	}


	function rightClick() {
		uni.navigateTo({
			url: './FeedBackRecord'
		})
	}




	function sub() {
		if (!content.value) return uni.$u.toast('请输入反馈的问题');
		// if (!name.value) return uni.$u.toast('请输入姓名');
		// if (!tel.value) return uni.$u.toast('请输入电话');
		// let flag = this.fileList1.some(item=>item.status=='success');
		// if(!flag) return this.$u.toast('请上传图片');
		let imgs = []
		if (fileList1.value.length) {
			fileList1.value.map(item => {
				if (item.status) {
					if (item.status == 'success') {
						imgs.push(item.url)
					}
				} else {
					imgs.push(item.url)
				}
			});
		}
		
		uni.$post({
			url: '/api/Home/Homefbok',
			data: {
				type: tabs[curtab.value].val,
				content: content.value,
				img: imgs.join(','),
				tel: tel.value,
				name: name.value,
			}
		}).then(res => {
			uni.$tt(res.msg, 'success');
			uni.$delayBack()
		})
		// console.log(imgs) // 需要的图片数组
	}




	// 删除图片
	const deletePic = (event) => {
		const arr = ref([]);
		switch (event.name * 1) {
			case 1:
				arr.value = fileList1.value;
				break;
			case 2:
				arr.value = fileList2.value;
				break;
		}
		arr.value.splice(event.index, 1);
	};
	// 新增图片
	const afterRead = async (event) => {
		const arr = ref([]);
		switch (event.name * 1) {
			case 1:
				arr.value = fileList1.value;
				break;
			case 2:
				arr.value = fileList2.value;
				break;
		}
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = arr.value.length;
		lists.map((item) => {
			arr.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = arr.value[fileListLen];
			arr.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: baseUrl + '/api/Common/upload', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				header: {
					token: uni.getStorageSync('user').token
				},
				success: (res) => {
					setTimeout(() => {
						resolve(JSON.parse(res.data).data.fullurl)
					}, 1000);
				},
			});
		});
	};
</script>



<style>
	.tab {
		color: #333333;
		font-size: 26rpx;
		width: 224rpx;
		height: 76rpx;
		background: #f3f5f9;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.tab-act {
		width: 224rpx;
		height: 76rpx;
		background: #01796c;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		color: #fff;
		font-size: 26rpx;
	}

	.q-box {
		height: 310rpx;
		background: #f3f5f9;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		padding: 24rpx 20rpx;
	}

	.input-box {
		height: 96rpx;
		background: #f3f5f9;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		padding: 0 20rpx;
	}

	.up-box {
		width: 166rpx;
		height: 166rpx;
		background: #F6F6F6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
	}
</style>